<template>
    <!-- 每日待办 -->
    <div class="quan">
        <div class="ju">
            <span>居家检测/每日待办</span>
        </div>
        <div class="hh">
            <div class="hh1">
                <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                    <el-table-column type="index" label="序号" min-width="10%" align="center" />
                    <el-table-column prop="itemName" label="事项名称" min-width="30%" align="center" />
                    <el-table-column prop="patientName" label="监测对象" min-width="30%" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="30%" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">
                                查看详情
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            <!-- //分页 -->
                <div class="table-footer">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                            layout="total,  prev, pager, next,sizes, jumper" 
                            :total="tableData.length" 
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>


        </div>


    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs,onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/views/chen/http'
export default defineComponent({
    name: "meir",
    setup() {
        let tableData1 =reactive({ 
            tableData:[
            {
                date: 1,
                name: '体温待监测',
                address: '李思国',
            },
            {
                date: 2,
                name: '监测待解除',
                address: '王大力',
            },
            {
                date: 3,
                name: '体温待监测',
                address: '王仁',
            },
            {
                date: 4,
                name: '监测待解除',
                address: '李海',
            },
        ]});
        const router = useRouter();
        //按钮
        const deleteRow = (index: any) => {
            if (index.itemName == "体温待监测") {
                router.push({ path: '/miqie', query: { id: index.id } })
            } else if (index.itemName == "监测待解除") {
                router.push({ path: '/cha', query: { id: index.id } })
            }
        };
        //分页
        let currentPage = ref(1);//当前页数
        let pageSize = ref(10);
        let small = ref(false);
        let background = ref(false);
        let disabled = ref(false);

        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
            
        };
        //跳转
        const handleCurrentChange = (val: number) => {
            console.log(val)
            
        };
        const noticeList = reactive({
            list: []
        });
        onBeforeMount(async()=>{
            await axios({
                method:"get",url:"dailyAgent/FindDailyAgent",
                params:{
                    currentPage:1,
                    pageSize:10,
                    operator:'王五',
                }
               }).then((res)=>{
                let a=res.data.data.dayDoList;
                tableData1.tableData=a;
                console.log(a);
                
                
               })
        })
        return {
            ...toRefs(tableData1),
            deleteRow,
            router,
            currentPage,
            pageSize,
            background,
            small,
            disabled,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(noticeList)
        }
    }
})


</script>

<style scoped lang="less">
.hh {
    width: 100%;
    height: 800px;
    background-color: rgb(255, 255, 255);
    

}

.quan {
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
}

// 设置表头样式
/deep/ .el-table th {
    background-color: #f9f9f9 !important;
    color: black;
    Font-weight: 400; // 字体粗细


}

.hh1 {
    margin-top: 30px;
    margin-left: 35px;
    margin-right: 35px;
    position: relative;
}

.ju {
    padding: 20px 0px 20px 0px;
}
.table-footer{
    position: absolute;
    bottom:-50px;
    right: 20px;
}
</style>